<template>
  <div class="check-task">
    <div>
      <!-- 报告模板 -->
      <van-field class="input_text" required name="radio" label="报告模板">
        <template #input>
          <van-radio-group v-model="data.ReportCode">
            <van-radio
              v-for="(item, index) in data.ReportDefines"
              :key="index"
              :name="item.ID"
              style="margin: 0 10px 10px 0"
              >{{ item.Name }}</van-radio
            >
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        class="input_text"
        required
        name="radio"
        label="生成设置"
        v-if="codesList.length > 1 && type == 'Report'"
      >
        <template #input>
          <van-radio-group v-model="data.GenerateOption">
            <van-radio name="2" style="margin: 0 10px 10px 0"
              >合并生成一个报告</van-radio
            >
            <van-radio name="1" style="margin: 0 10px 10px 0"
              >每个任务独立生成报告</van-radio
            >
          </van-radio-group>
        </template>
      </van-field>
      <!-- 报告名称 -->
      <van-field
        v-if="data.GenerateOption == 2"
        label="报告名称"
        required
        v-model="data.Name"
        rows="3"
        autosize
        type="textarea"
        placeholder="请输入报告名称"
      />

      <!-- 单选框 -->
      <van-field class="input_text mb-10" name="radio" label="隐患排序类型">
        <template #input>
          <van-radio-group v-model="data.OrderType" direction="horizontal">
            <van-radio
              v-for="(item, index) in data.OrderTypeList"
              :key="index"
              :name="item.ID"
              style="margin: 0 10px 10px 0"
              >{{ item.Name }}</van-radio
            >
          </van-radio-group>
        </template>
      </van-field>
      <!-- 日期 Date-->
      <van-field
        required
        class="input_text"
        name="calendar"
        :value="data.StartDate"
        label="开始日期"
        placeholder="点击选择日期"
        @click="openCalendar('StartDate')"
      >
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-field>
      <van-field
        required
        class="input_text"
        name="calendar"
        :value="data.EndDate"
        label="结束日期"
        placeholder="点击选择日期"
        @click="openCalendar('EndDate')"
      >
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-field>
      <van-calendar
        color="#1989fa"
        v-model="showCalendar"
        @confirm="onConfirm"
      />

      <div>
        <van-field
          class="input_text"
          label="总结和建议"
          readonly
          :border="false"
        />
        <van-field
          v-model="data.CheckRequirement"
          rows="3"
          autosize
          type="textarea"
          placeholder="请输入总结和建议"
        />
      </div>

      <div class="bottom-btns">
        <van-button class="submit-btn" type="primary" @click="save()">
          生成
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getGenerateEntity, generateReport } from "@/api/sytech/sytechDangerCheckreport";
import { mapGetters } from "vuex";
import { formatDate, getDate } from "@/utils/getDate";

export default {
  components: {},
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      title: "",
      codes: this.$route.query.codes,
      type: this.$route.query.type,
      filter: {
        id: 0,
        type: "Task",
        lgType: "normal",
        reportType: this.$route.query.reportType||1,
      },
      data: {},
      uploader: [{ url: "https://img.yzcdn.cn/vant/leaf.jpg" }],
      showCalendar: false,
      idx: "",
      show: false,
      showChooseTask: false,
      activeIcon: require("@/assets/Images/AppIcon/item_check_transparent.png"),
      codesList: [],
    };
  },
  created() {
    if (this.$route.query.codes) {
      this.getGenerateEntity();
      let codesList = this.codes.split(",");
      this.codesList = codesList;
    }
  },
  activated() {},
  methods: {
    getGenerateEntity() {
      this.filter.codes = this.codes;
      getGenerateEntity(this.filter).then((res) => {
        res.data.OrderTypeList.unshift({
          ID: 0,
          Name: "不限",
        });
        res.data.OrderType = 0;
        res.data.ReportCode = res.data.ReportDefines[0].ID;
        res.data.StartDate = getDate(res.data.StartDate);
        res.data.EndDate = getDate(res.data.EndDate);
        this.data = res.data;
      });
    },
    // 选择检查类型
    checkTypeName() {
      this.show = true;
    },
    // 打开日历
    openCalendar(idx) {
      this.idx = idx;
      this.showCalendar = true;
    },
    onConfirm(date) {
      const dateTime = formatDate(date);
      this.data[this.idx] = getDate(dateTime);
      this.showCalendar = false;
    },
    save() {
      console.log(this.data, "this.data");
      if (!this.data.ReportCode) {
        return this.$toast("请选择报告模板");
      }
      if (this.data.GenerateOption == 2) {
        if (!this.data.Name) {
          return this.$toast("请填写报告名称");
        }
      }

      if (!this.data.StartDate) {
        return this.$toast("请选择开始日期");
      }
      if (!this.data.EndDate) {
        return this.$toast("请选择结束日期");
      }
      this.loading = true;
      let form = {
        Codes: this.data.Codes,
        ReportCode: this.data.ReportCode,
        ReportType: this.data.ReportType,
        GenerateOption: this.data.GenerateOption,
        Type: this.data.Type,
        StartDate: this.data.StartDate,
        EndDate: this.data.EndDate,
        Remarks: this.data.Remarks,
        Name: this.data.Name,
      };
      generateReport(form)
        .then((res) => {
          console.log(res, "res");
          this.$toast("生成成功");
          this.loading = false;
          setTimeout(() => {
            this.title = "报告详情";
            this.$router.push({
              path: "/SytechDanger/CheckReportDetail",
              query: {
                url: this.baseUrl + res.data.Attachs,
              },
            });
          }, 300);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.check-task {
  background-color: #e8f1f8;
  padding-bottom: 20px;
}
.problem {
  margin-bottom: 10px;
}
.bottom-btns {
  margin-top: 10px;
  padding: 0 20px;

  .submit-btn {
    width: 100%;
    height: 30px;
    font-size: 12px;
  }
}
</style>
